<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站留言与回复样式展示</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #4361ee;
            --primary-light: #7209b7;
            --secondary: #3f37c9;
            --light: #f8f9fa;
            --dark: #212529;
            --gray: #6c757d;
            --light-gray: #e9ecef;
            --danger: #e63946;
            --success: #4cc9f0;
            --transition: all 0.25s ease;
        }
        
        body {
            font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            background-color: #f5f7fa;
            color: var(--dark);
            line-height: 1.6;
            padding: 30px 0;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 40px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--primary);
            display: inline-block;
        }
        
        .container {
            max-width: 900px;
        }
        
        .comment-section {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            margin-bottom: 40px;
            overflow: hidden;
        }
        
        .section-header {
            padding: 18px 20px;
            background-color: var(--primary);
            color: white;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .section-body {
            padding: 20px;
        }
        
        .section-footer {
            padding: 15px 20px;
            background-color: var(--light);
            border-top: 1px solid var(--light-gray);
            font-size: 0.9rem;
            color: var(--gray);
        }
        
        /* 留言基础样式 */
        .comment {
            padding: 15px 0;
            border-bottom: 1px solid var(--light-gray);
            position: relative;
        }
        
        .comment:last-child {
            border-bottom: none;
        }
        
        .comment-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 15px;
            flex-shrink: 0;
        }
        
        .comment-main {
            flex: 1;
        }
        
        .comment-header {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }
        
        .comment-author {
            font-weight: 600;
            margin-right: 10px;
            color: var(--dark);
        }
        
        .comment-meta {
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        .comment-text {
            margin-bottom: 10px;
            word-break: break-word;
        }
        
        .comment-actions {
            display: flex;
            gap: 15px;
            font-size: 0.85rem;
        }
        
        .comment-action {
            color: var(--gray);
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .comment-action:hover {
            color: var(--primary);
        }
        
        /* 回复样式 */
        .replies {
            margin-left: 63px; /* 头像宽度 + 间距 */
            margin-top: 15px;
        }
        
        .reply {
            padding: 12px 0;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .reply:last-child {
            border-bottom: none;
        }
        
        .reply .comment-avatar {
            width: 40px;
            height: 40px;
        }
        
        .reply .comment-text {
            font-size: 0.95rem;
        }
        
        .reply-to {
            color: var(--primary);
            font-weight: 500;
        }
        
        /* 输入框样式 */
        .comment-input, .reply-input {
            margin-top: 15px;
        }
        
        .comment-input textarea, .reply-input textarea {
            width: 100%;
            border: 1px solid var(--light-gray);
            border-radius: 8px;
            padding: 12px 15px;
            resize: none;
            font-size: 0.95rem;
            transition: var(--transition);
        }
        
        .comment-input textarea:focus, .reply-input textarea:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
        }
        
        .input-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }
        
        .input-tools {
            display: flex;
            gap: 15px;
            color: var(--gray);
        }
        
        .input-tool {
            cursor: pointer;
            transition: var(--transition);
        }
        
        .input-tool:hover {
            color: var(--primary);
        }
        
        .btn-post {
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 6px 16px;
            font-weight: 500;
            transition: var(--transition);
            font-size: 0.9rem;
        }
        
        .btn-post:hover {
            background-color: var(--secondary);
        }
        
        /* 特殊样式 */
        .pinned-comment {
            background-color: rgba(67, 97, 238, 0.03);
            border-left: 3px solid var(--primary);
            padding-left: 15px;
        }
        
        .pinned-badge {
            background-color: var(--primary);
            color: white;
            font-size: 0.7rem;
            padding: 1px 6px;
            border-radius: 4px;
            margin-left: 8px;
        }
        
        .verified-badge {
            color: var(--primary);
            margin-left: 5px;
        }
        
        .media-attachments {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 10px 0;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .media-attachment {
            width: 100px;
            height: 100px;
            border-radius: 6px;
            object-fit: cover;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .media-attachment:hover {
            transform: scale(1.03);
        }
        
        .like-count {
            font-size: 0.85rem;
            color: var(--gray);
            margin-top: 5px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .like-count.has-likes {
            color: var(--danger);
        }
        
        /* 折叠/展开控制 */
        .toggle-replies {
            color: var(--primary);
            font-size: 0.85rem;
            cursor: pointer;
            margin-top: 8px;
            display: inline-block;
        }
        
        /* 深色模式适配 */
        @media (prefers-color-scheme: dark) {
            body {
                background-color: #121212;
                color: #e0e0e0;
            }
            
            .comment-section {
                background-color: #1e1e1e;
            }
            
            .section-footer {
                background-color: #2d2d2d;
                border-top-color: #3d3d3d;
                color: #bbbbbb;
            }
            
            .comment {
                border-bottom-color: #3d3d3d;
            }
            
            .reply {
                border-bottom-color: #3d3d3d;
            }
            
            .comment-author {
                color: #ffffff;
            }
            
            .comment-meta {
                color: #bbbbbb;
            }
            
            .pinned-comment {
                background-color: rgba(67, 97, 238, 0.1);
            }
            
            .comment-input textarea, .reply-input textarea {
                background-color: #2d2d2d;
                border-color: #3d3d3d;
                color: #e0e0e0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="section-title mx-auto">社交网站留言与回复样式展示</h1>
        
        <!-- 1. 基础留言与回复 -->
        <div class="comment-section">
            <div class="section-header">
                <i class="fas fa-comments"></i>
                <span>基础留言与回复系统</span>
            </div>
            <div class="section-body">
                <!-- 主留言 -->
                <div class="comment d-flex">
                    <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="comment-avatar">
                    <div class="comment-main">
                        <div class="comment-header">
                            <span class="comment-author">陈明</span>
                            <span class="comment-meta">今天 14:30</span>
                        </div>
                        <div class="comment-text">
                            我觉得这个新功能非常实用，解决了之前一直困扰我们的问题。希望后续能加入更多自定义选项。
                        </div>
                        <div class="comment-actions">
                            <div class="comment-action like-btn">
                                <i class="far fa-heart"></i> 点赞
                            </div>
                            <div class="comment-action reply-btn">
                                <i class="far fa-reply"></i> 回复
                            </div>
                            <div class="comment-action">
                                <i class="far fa-share-square"></i> 分享
                            </div>
                        </div>
                        
                        <!-- 回复列表 -->
                        <div class="replies">
                            <div class="reply d-flex">
                                <img src="https://picsum.photos/id/65/200/200" alt="用户头像" class="comment-avatar">
                                <div class="comment-main">
                                    <div class="comment-header">
                                        <span class="comment-author">李华</span>
                                        <span class="comment-meta">今天 15:10</span>
                                    </div>
                                    <div class="comment-text">
                                        <span class="reply-to">@陈明</span> 完全同意，特别是批量处理功能，节省了我很多时间。
                                    </div>
                                    <div class="comment-actions">
                                        <div class="comment-action like-btn">
                                            <i class="far fa-heart"></i> 点赞
                                        </div>
                                        <div class="comment-action reply-btn">
                                            <i class="far fa-reply"></i> 回复
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 回复输入框 -->
                            <div class="reply-input">
                                <textarea rows="2" placeholder="回复..."></textarea>
                                <div class="input-actions">
                                    <div class="input-tools">
                                        <div class="input-tool">
                                            <i class="far fa-image"></i>
                                        </div>
                                        <div class="input-tool">
                                            <i class="far fa-smile"></i>
                                        </div>
                                    </div>
                                    <button class="btn-post">回复</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 第二条主留言 -->
                <div class="comment d-flex">
                    <img src="https://picsum.photos/id/91/200/200" alt="用户头像" class="comment-avatar">
                    <div class="comment-main">
                        <div class="comment-header">
                            <span class="comment-author">王芳</span>
                            <span class="comment-meta">今天 10:25</span>
                        </div>
                        <div class="comment-text">
                            我遇到一个问题，在使用高级模式时经常会闪退，有没有其他人遇到类似情况？
                        </div>
                        <div class="comment-actions">
                            <div class="comment-action like-btn">
                                <i class="far fa-heart"></i> 点赞
                            </div>
                            <div class="comment-action reply-btn">
                                <i class="far fa-reply"></i> 回复
                            </div>
                            <div class="comment-action">
                                <i class="far fa-share-square"></i> 分享
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 留言输入框 -->
                <div class="comment-input">
                    <textarea rows="3" placeholder="分享你的想法..."></textarea>
                    <div class="input-actions">
                        <div class="input-tools">
                            <div class="input-tool">
                                <i class="far fa-image"></i>
                            </div>
                            <div class="input-tool">
                                <i class="far fa-smile"></i>
                            </div>
                            <div class="input-tool">
                                <i class="far fa-at"></i>
                            </div>
                        </div>
                        <button class="btn-post">发表留言</button>
                    </div>
                </div>
            </div>
            <div class="section-footer">
                <p><strong>特点：</strong> 简洁的留言与回复层级结构，清晰的用户信息展示，基础的互动功能（点赞、回复、分享）。</p>
                <p><strong>适用场景：</strong> 博客评论、新闻评论、简单的社交互动场景。</p>
            </div>
        </div>
        
        <!-- 2. 带媒体内容的留言回复 -->
        <div class="comment-section">
            <div class="section-header">
                <i class="fas fa-images"></i>
                <span>带媒体内容的留言回复</span>
            </div>
            <div class="section-body">
                <!-- 带图片的留言 -->
                <div class="comment d-flex">
                    <img src="https://picsum.photos/id/25/200/200" alt="用户头像" class="comment-avatar">
                    <div class="comment-main">
                        <div class="comment-header">
                            <span class="comment-author">赵伟</span>
                            <span class="comment-meta">昨天 09:45</span>
                        </div>
                        <div class="comment-text">
                            分享一下我新拍的照片，使用了最新的滤镜功能，效果不错吧！
                        </div>
                        <div class="media-attachments">
                            <img src="https://picsum.photos/id/29/500/300" alt="风景照片" class="media-attachment">
                            <img src="https://picsum.photos/id/30/500/300" alt="建筑照片" class="media-attachment">
                        </div>
                        <div class="comment-actions">
                            <div class="comment-action like-btn">
                                <i class="far fa-heart"></i> 点赞 (24)
                            </div>
                            <div class="comment-action reply-btn">
                                <i class="far fa-reply"></i> 回复 (6)
                            </div>
                            <div class="comment-action">
                                <i class="far fa-bookmark"></i> 收藏
                            </div>
                        </div>
                        
                        <!-- 回复 -->
                        <div class="replies">
                            <div class="reply d-flex">
                                <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="comment-avatar">
                                <div class="comment-main">
                                    <div class="comment-header">
                                        <span class="comment-author">陈明</span>
                                        <span class="comment-meta">昨天 10:12</span>
                                    </div>
                                    <div class="comment-text">
                                        <span class="reply-to">@赵伟</span> 拍得真好！请问第二张是在哪里拍的？
                                    </div>
                                    <div class="comment-actions">
                                        <div class="comment-action like-btn">
                                            <i class="far fa-heart"></i> 点赞 (3)
                                        </div>
                                        <div class="comment-action reply-btn">
                                            <i class="far fa-reply"></i> 回复
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 留言输入框 -->
                <div class="comment-input">
                    <textarea rows="3" placeholder="分享你的想法或图片..."></textarea>
                    <div class="input-actions">
                        <div class="input-tools">
                            <div class="input-tool">
                                <i class="far fa-image"></i> 图片
                            </div>
                            <div class="input-tool">
                                <i class="far fa-video"></i> 视频
                            </div>
                            <div class="input-tool">
                                <i class="far fa-smile"></i> 表情
                            </div>
                        </div>
                        <button class="btn-post">发表留言</button>
                    </div>
                </div>
            </div>
            <div class="section-footer">
                <p><strong>特点：</strong> 支持图片、视频等媒体内容展示，缩略图预览，媒体内容与文字评论结合展示。</p>
                <p><strong>适用场景：</strong> 摄影社区、旅行分享、生活记录类社交平台。</p>
            </div>
        </div>
        
        <!-- 3. 多层嵌套回复 -->
        <div class="comment-section">
            <div class="section-header">
                <i class="fas fa-sort-amount-down"></i>
                <span>多层嵌套回复系统</span>
            </div>
            <div class="section-body">
                <!-- 主留言 -->
                <div class="comment d-flex">
                    <img src="https://picsum.photos/id/65/200/200" alt="用户头像" class="comment-avatar">
                    <div class="comment-main">
                        <div class="comment-header">
                            <span class="comment-author">李华</span>
                            <span class="verified-badge"><i class="fas fa-check-circle"></i></span>
                            <span class="comment-meta">3天前</span>
                        </div>
                        <div class="comment-text">
                            关于这个新政策，我想听听大家的看法。从专业角度来看，这可能会带来三方面影响：行业规范化、竞争格局变化和用户体验提升。你们怎么看？
                        </div>
                        <div class="comment-actions">
                            <div class="comment-action like-btn">
                                <i class="far fa-heart"></i> 点赞 (89)
                            </div>
                            <div class="comment-action reply-btn">
                                <i class="far fa-reply"></i> 回复 (15)
                            </div>
                            <div class="comment-action">
                                <i class="far fa-share-square"></i> 分享
                            </div>
                        </div>
                        
                        <!-- 一级回复 -->
                        <div class="replies">
                            <div class="reply d-flex">
                                <img src="https://picsum.photos/id/91/200/200" alt="用户头像" class="comment-avatar">
                                <div class="comment-main">
                                    <div class="comment-header">
                                        <span class="comment-author">王芳</span>
                                        <span class="comment-meta">3天前</span>
                                    </div>
                                    <div class="comment-text">
                                        <span class="reply-to">@李华</span> 我认为规范化是好事，但可能会增加中小企业的运营成本，不利于创新。
                                    </div>
                                    <div class="comment-actions">
                                        <div class="comment-action like-btn">
                                            <i class="far fa-heart"></i> 点赞 (23)
                                        </div>
                                        <div class="comment-action reply-btn">
                                            <i class="far fa-reply"></i> 回复
                                        </div>
                                    </div>
                                    
                                    <!-- 二级回复 -->
                                    <div class="replies">
                                        <div class="reply d-flex">
                                            <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="comment-avatar">
                                            <div class="comment-main">
                                                <div class="comment-header">
                                                    <span class="comment-author">陈明</span>
                                                    <span class="comment-meta">2天前</span>
                                                </div>
                                                <div class="comment-text">
                                                    <span class="reply-to">@王芳</span> 有道理，但从长远来看，规范化可以提高整个行业的信任度，可能带来更多用户。
                                                </div>
                                                <div class="comment-actions">
                                                    <div class="comment-action like-btn">
                                                        <i class="far fa-heart"></i> 点赞 (7)
                                                    </div>
                                                    <div class="comment-action reply-btn">
                                                        <i class="far fa-reply"></i> 回复
                                                    </div>
                                                </div>
                                                
                                                <!-- 三级回复 -->
                                                <div class="replies">
                                                    <div class="reply d-flex">
                                                        <img src="https://picsum.photos/id/25/200/200" alt="用户头像" class="comment-avatar">
                                                        <div class="comment-main">
                                                            <div class="comment-header">
                                                                <span class="comment-author">赵伟</span>
                                                                <span class="comment-meta">2天前</span>
                                                            </div>
                                                            <div class="comment-text">
                                                                <span class="reply-to">@陈明</span> 同意你的观点，短期阵痛换长期发展是值得的。
                                                            </div>
                                                            <div class="comment-actions">
                                                                <div class="comment-action like-btn">
                                                                    <i class="far fa-heart"></i> 点赞 (4)
                                                                </div>
                                                                <div class="comment-action reply-btn">
                                                                    <i class="far fa-reply"></i> 回复
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 另一个一级回复 -->
                            <div class="reply d-flex">
                                <img src="https://picsum.photos/id/65/200/200" alt="用户头像" class="comment-avatar">
                                <div class="comment-main">
                                    <div class="comment-header">
                                        <span class="comment-author">李华</span>
                                        <span class="verified-badge"><i class="fas fa-check-circle"></i></span>
                                        <span class="comment-meta">2天前</span>
                                    </div>
                                    <div class="comment-text">
                                        感谢大家的讨论，看来大家对规范化的利弊有不同看法，这很正常。我会整理这些观点，在下周的专栏中深入分析。
                                    </div>
                                    <div class="comment-actions">
                                        <div class="comment-action like-btn">
                                            <i class="far fa-heart"></i> 点赞 (31)
                                        </div>
                                        <div class="comment-action reply-btn">
                                            <i class="far fa-reply"></i> 回复
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 留言输入框 -->
                <div class="comment-input">
                    <textarea rows="3" placeholder="加入讨论..."></textarea>
                    <div class="input-actions">
                        <div class="input-tools">
                            <div class="input-tool">
                                <i class="far fa-image"></i>
                            </div>
                            <div class="input-tool">
                                <i class="far fa-smile"></i>
                            </div>
                            <div class="input-tool">
                                <i class="far fa-at"></i>
                            </div>
                        </div>
                        <button class="btn-post">发表留言</button>
                    </div>
                </div>
            </div>
            <div class="section-footer">
                <p><strong>特点：</strong> 支持多层级嵌套回复，清晰的缩进视觉层级，@提及功能，可识别的用户身份标识（认证徽章）。</p>
                <p><strong>适用场景：</strong> 论坛讨论、深度话题交流、专业领域社区。</p>
            </div>
        </div>
        
        <!-- 4. 带管理员功能的留言系统 -->
        <div class="comment-section">
            <div class="section-header">
                <i class="fas fa-shield-alt"></i>
                <span>带管理员功能的留言系统</span>
            </div>
            <div class="section-body">
                <!-- 置顶留言 -->
                <div class="comment d-flex pinned-comment">
                    <img src="https://picsum.photos/id/100/200/200" alt="管理员头像" class="comment-avatar">
                    <div class="comment-main">
                        <div class="comment-header">
                            <span class="comment-author">管理员</span>
                            <span class="verified-badge"><i class="fas fa-shield-alt"></i></span>
                            <span class="pinned-badge">置顶</span>
                            <span class="comment-meta">5天前</span>
                        </div>
                        <div class="comment-text">
                            欢迎大家参与讨论！请遵守社区规范，文明发言。对于违规内容，管理员将进行删除处理。有任何问题请私信联系我们。
                        </div>
                        <div class="comment-actions">
                            <div class="comment-action like-btn">
                                <i class="far fa-heart"></i> 点赞 (156)
                            </div>
                            <div class="comment-action reply-btn">
                                <i class="far fa-reply"></i> 回复
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 普通用户留言 -->
                <div class="comment d-flex">
                    <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="comment-avatar">
                    <div class="comment-main">
                        <div class="comment-header">
                            <span class="comment-author">陈明</span>
                            <span class="comment-meta">4天前</span>
                        </div>
                        <div class="comment-text">
                            请问什么时候会推出移动端的新版本？现在的版本有些功能不太稳定。
                        </div>
                        <div class="comment-actions">
                            <div class="comment-action like-btn">
                                <i class="far fa-heart"></i> 点赞 (12)
                            </div>
                            <div class="comment-action reply-btn">
                                <i class="far fa-reply"></i> 回复
                            </div>
                            <div class="comment-action admin-action" style="display:none">
                                <i class="far fa-trash-alt"></i> 删除
                            </div>
                        </div>
                        
                        <!-- 管理员回复 -->
                        <div class="replies">
                            <div class="reply d-flex">
                                <img src="https://picsum.photos/id/100/200/200" alt="管理员头像" class="comment-avatar">
                                <div class="comment-main">
                                    <div class="comment-header">
                                        <span class="comment-author">管理员</span>
                                        <span class="verified-badge"><i class="fas fa-shield-alt"></i></span>
                                        <span class="comment-meta">4天前</span>
                                    </div>
                                    <div class="comment-text">
                                        <span class="reply-to">@陈明</span> 移动端新版本预计将在下周发布，会修复当前版本的已知问题，感谢你的反馈！
                                    </div>
                                    <div class="comment-actions">
                                        <div class="comment-action like-btn">
                                            <i class="far fa-heart"></i> 点赞 (8)
                                        </div>
                                        <div class="comment-action reply-btn">
                                            <i class="far fa-reply"></i> 回复
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 留言输入框 -->
                <div class="comment-input">
                    <textarea rows="3" placeholder="请文明发言，遵守社区规范..."></textarea>
                    <div class="input-actions">
                        <div class="input-tools">
                            <div class="input-tool">
                                <i class="far fa-image"></i>
                            </div>
                            <div class="input-tool">
                                <i class="far fa-smile"></i>
                            </div>
                        </div>
                        <button class="btn-post">发表留言</button>
                    </div>
                </div>
            </div>
            <div class="section-footer">
                <p><strong>特点：</strong> 支持留言置顶、管理员标识、官方回复突出显示、内容管理功能（删除等）。</p>
                <p><strong>适用场景：</strong> 产品社区、官方论坛、需要内容管理的社交平台。</p>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 点赞功能
            const likeButtons = document.querySelectorAll('.like-btn');
            likeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    const text = this.textContent.trim();
                    
                    // 切换图标状态
                    icon.classList.toggle('far');
                    icon.classList.toggle('fas');
                    icon.classList.toggle('text-danger');
                    
                    // 更新点赞数
                    if (text.includes('(')) {
                        let count = parseInt(text.match(/\d+/)[0]);
                        if (icon.classList.contains('fas')) {
                            count++;
                        } else {
                            count--;
                        }
                        this.innerHTML = icon.outerHTML + ' 点赞 (' + count + ')';
                    } else {
                        // 如果没有数字，添加初始数字
                        this.innerHTML = icon.outerHTML + ' 点赞 (1)';
                    }
                });
            });
            
            // 回复功能 - 点击回复按钮自动聚焦到对应输入框
            const replyButtons = document.querySelectorAll('.reply-btn');
            replyButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 找到最近的回复输入框
                    const commentMain = this.closest('.comment-main');
                    let replyInput = commentMain.querySelector('.reply-input textarea');
                    
                    // 如果找不到，检查是否在回复中，向上查找
                    if (!replyInput) {
                        const reply = this.closest('.reply');
                        if (reply) {
                            const replies = reply.closest('.replies');
                            replyInput = replies.querySelector('.reply-input textarea');
                        } else {
                            // 如果是主评论的回复按钮
                            const comment = this.closest('.comment');
                            const replies = comment.querySelector('.replies');
                            replyInput = replies ? replies.querySelector('.reply-input textarea') : null;
                        }
                    }
                    
                    // 如果找到输入框，聚焦
                    if (replyInput) {
                        replyInput.focus();
                        
                        // 如果是回复特定用户，自动添加@
                        const authorElem = this.closest('.comment, .reply').querySelector('.comment-author');
                        if (authorElem && !replyInput.value.includes('@')) {
                            replyInput.value = '@' + authorElem.textContent + ' ';
                            // 将光标移动到最后
                            replyInput.scrollTop = replyInput.scrollHeight;
                            replyInput.setSelectionRange(replyInput.value.length, replyInput.value.length);
                        }
                    }
                });
            });
            
            // 模拟管理员模式切换
            const toggleAdminMode = () => {
                const adminActions = document.querySelectorAll('.admin-action');
                adminActions.forEach(action => {
                    action.style.display = action.style.display === 'none' ? 'flex' : 'none';
                });
            };
            
            // 为演示目的，双击页面任意位置切换管理员模式
            document.addEventListener('dblclick', toggleAdminMode);
        });
    </script>
</body>
</html>
    
